{extend name="public/base" /}

{block name="style"}
<link rel="stylesheet" href="__STATIC__/css/floating-labels.css">
<style>
    .verify-img {
        padding-left: 0px;
    }
    .verify-img img {
        width: 100%;
        height: 3rem;
    }
    .form-control {
        height: inherit;
    }
</style>
{/block}

{block name="content"}
<form class="form-signin" method="post" id="login">
    {:token()}
    <div class="text-center mb-4 mt-5">
        <h1 class="h3 mb-3 font-weight-normal">注册会员</h1>
        <p class="text-muted">已有账号 <a href="{:url('User/login')}">登录</a></p>
    </div>

    <div class="form-label-group">
        <input type="email" name="email" id="inputEmail" class="form-control" placeholder="输入邮箱" required autofocus>
        <label for="inputEmail">输入邮箱</label>
    </div>

    <div class="form-label-group">
        <input type="password" name="password" id="inputPassword" class="form-control" placeholder="输入密码" required>
        <label for="inputPassword">输入密码</label>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="form-label-group">
                <input type="text" name="captcha" id="inputCaptcha" class="form-control" placeholder="输入验证码" required>
                <label for="inputCaptcha">输入验证码</label>
            </div>
        </div>
        <div class="col-md-6 verify-img">
            <div><img src="{:url('User/verify')}" id="verifyImg" onclick="this.src = '{:url('user/verify')}?r=' + Math.random();" /></div>
        </div>
    </div>



    <button class="btn btn-lg btn-primary btn-block mt-3 mt-md-auto" type="button" id="register">注册</button>
    <div class="checkbox mt-2 text-muted">
        <label>
            <input type="checkbox" value="remember-me" checked> 注册协议
        </label>
    </div>

</form>
{/block}

{block name="script"}
<script>

    toastr.options = {
        "closeButton": true,
        //"progressBar": true,
        "positionClass": "toast-top-center",
        "timeOut": "1500"
    };

    $('#register').on('click',function () {
        $.ajax({
            type: 'post',
            url: "{:url('registerDo')}",
            data: $('#login').serialize(),
            dataType: 'json',
            success: function (data) {
                switch (data.status)
                {
                    case 1:
                        toastr.success(data.message);
                        setTimeout(function () {
                            window.location.href = "{:url('User/index')}";
                        },1500);
                        break;
                    case 0:
                    case -1:
                        //刷新token,将控制器生成的新的token赋值给他
                        $('input[name="__token__"]').val(data.token);
                        //刷新验证码,保证出错后验证码还是最新的
                        $('#verifyImg').attr('src',"{:url('user/verify')}" + '?r=' + Math.random());
                        toastr.warning(data.message);
                        break;
                }
            }
        })
    })

</script>
{/block}